<template>
  <el-row :gutter="20">
    <el-card class="box-construction" shadow="always" :style="`height:${Height}px`">
      <div class="box-title box-title-position">
        <div>项目经理考核</div>
        <el-button
          class="add-small-btn"
          size="small"
          type="primary"
          @click="addPerformance()"
        >添加考核成绩</el-button>
      </div>
      <el-col :span="9">
        <el-table
          ref="proTable"
          border
          v-loading="proLoading"
          highlight-current-row
          :show-header="false"
          :data="proTableData"
          :max-height="`${Height-100}`"
          @row-click="rowProClick"
          style="width: 100%;margin-top:20px"
        >
          <el-table-column
            prop="project_name"
            :show-overflow-tooltip="true"
            align="center"
            label="姓名"
          ></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="5">
        <el-table
          ref="leftTable"
          border
          v-loading="leftLoading"
          highlight-current-row
          :show-header="false"
          :data="leftData"
          :max-height="`${Height-100}`"
          @row-click="rowClick"
          style="width: 100%;margin-top:20px"
        >
          <el-table-column prop="zn_name" :show-overflow-tooltip="true" align="center" label="姓名">
            <template slot-scope="scope">
              <i v-if="scope.row.status==-1" class="el-icon-time" style="margin-right:7px;" />
              <span>{{scope.row.zn_name}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="10">
        <!-- <div class="btn-box">
          <el-button size="small" type="primary" @click="addPerformance()">添加考核成绩</el-button>
        </div>-->
        <el-table
          border
          v-loading="rightLoading"
          :show-header="false"
          :data="rightData"
          :max-height="`${Height-100}`"
          style="width: 100%;margin-top:20px"
        >
          <el-table-column prop="month" label="时间" width="80"></el-table-column>
          <el-table-column prop="score" label="分数" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" width="70">
            <template slot-scope="scope">
              <span
                class="el-tag el-tag--mini"
                style="cursor: pointer;"
                @click="scoreDel(scope.row,scope.$index,false)"
              >删除</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="box-page"
          small
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentPage"
          layout="total, prev, pager, next"
          :total="pagination.total"
        ></el-pagination>
      </el-col>
    </el-card>
    <EditForm
      ref="editForm"
      v-if="visible"
      :title="formTitle"
      :datas.sync="editRow"
      :visible.sync="visible"
      :baseStyle="baseStyle"
      @saveForm="submit"
    />
  </el-row>
</template>
<script>
import API from "@apis/newProject";
import perAPI from "@apis/performance";
import { mapState } from "vuex";
import EditForm from "./editForm/index";
export default {
  data() {
    return {
      proLoading: false,
      leftLoading: false,
      rightLoading: false,
      curProjectRow: null,
      proTableData: [],
      selectRow: null,
      leftData: [],
      cueLeftRow: {},
      rightData: [],
      pagination: {
        currentPage: 1,
        pageNo: 1,
        pageSize: 5,
        total: 0,
      },

      editRow: {},
      visible: false,
      baseStyle: {
        width: "100px",
      },
      formTitle: "添加考核成绩",
    };
  },
  components: {
    EditForm,
  },
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
    Height() {
      return document.documentElement.clientHeight - 110;
    },
  },
  created() {
    //获取user中的字段值：this.userInfo.user
    // console.log(this.userInfo, "userInfo");
    this.proLoading = true;
    this.getProjectList();
  },
  mounted() {},
  methods: {
    //获取最左侧的项目列表
    getProjectList() {
      if (!this.userInfo.user.review_id) {
        this.proLoading = false;
        this.$message.warning("请先到考核关系处关联用户，关联后请刷新页面！");
        return;
      }
      let parmars = {
        uid: this.userInfo.user.id,
        pageNo: 1,
        pageSize: 1000,
      };
      API.getAllProjectListWithChange(parmars)
        .then((res) => {
          this.proTableData = [...res.data];
          this.proLoading = false;

          this.$nextTick(() => {
            if (this.proTableData.length <= 0) {
              return;
            }
            this.$refs.proTable.setCurrentRow(this.proTableData[0]);
            this.curProjectRow = { ...this.proTableData[0] };
            this.leftLoading = true;
            this.getLeftList(this.curProjectRow);
          });
        })
        .catch((err) => {
          this.proLoading = false;
          this.$message.error(err.message);
        });
    },
    getLeftList(val) {
      // console.log(val, "proRow");
      this.rightData = [];
      perAPI
        .projectTeamList({
          project_id: val.id,
        })
        .then((res) => {
          // console.log(res, "res");
          this.leftData = [...res];
          this.leftLoading = false;
          this.$nextTick(() => {
            if (this.leftData.length <= 0) {
              return;
            }
            this.$refs.leftTable.setCurrentRow(this.leftData[0]);
            this.rightLoading = true;
            this.cueLeftRow = { ...this.leftData[0] };
            this.getRightList(this.leftData[0], 1);
          });
        })
        .catch((err) => {
          this.leftLoading = false;
          if (err.data.code) {
            console.log(err, "err");
            this.$message.error(err.message);
          }
        });
    },
    getRightList(val, pageNo) {
      // console.log(val, "nameRow");
      perAPI
        .teamReviewList({
          page: pageNo,
          pagesize: 10,
          uid: val.id,
          project_id: this.curProjectRow.id,
        })
        .then((res) => {
          this.pagination = {
            currentPage: res.current_page,
            pageNo: res.current_page,
            pageSize: res.per_page,
            total: res.total,
          };
          this.rightData = [...res.data];
          this.rightLoading = false;
        })
        .catch((err) => {
          this.rightLoading = false;
          if (err.data.code) {
            console.log(err, "err");
            this.$message.error(err.message);
          }
        });
    },
    //分页
    handleCurrentChange(val) {
      this.rightLoading = true;
      this.getRightList(this.cueLeftRow, val);
    },
    rowProClick(row, column, event) {
      // console.log(row,"pro");
      this.leftLoading = true;
      this.curProjectRow = { ...row };
      this.getLeftList(row);
    },
    rowClick(row, column, event) {
      // console.log(row,"name");
      this.rightLoading = true;
      this.cueLeftRow = { ...row };
      this.getRightList(row, 1);
    },
    addPerformance() {
      if (!this.cueLeftRow.id) {
        this.$message.warning("请先选择考核人");
        return;
      }
      this.visible = true;
    },
    submit(val) {
      // console.log(val, "editForm");
      perAPI
        .teamReviewAdd({
          uid: this.cueLeftRow.id,
          project_id: this.curProjectRow.id,
          score: val.score,
          month: val.month,
        })
        .then((res) => {
          this.$refs.editForm.cancel();
          this.rightLoading = true;
          this.getRightList(this.cueLeftRow, this.pagination.pageNo);
        })
        .catch((err) => {
          this.$refs.editForm.loadingClose();
          this.$message.error(err.message);
          console.log(err, "err");
        });
    },
    scoreDel(row) {
      this.$confirm("删除考核成绩, 是否继续?", "提示", {
        closeOnClickModal: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.rightLoading = true;
          perAPI
            .teamReviewDel(row.id)
            .then((res) => {
              if (this.pagination.pageNo > 1 && this.rightData.length == 1) {
                this.pagination.pageNo = this.pagination.pageNo - 1;
              }
              this.getRightList(this.cueLeftRow, this.pagination.pageNo);
            })
            .catch((err) => {
              this.$message.error(err.message);
            });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.add-small-btn {
  position: absolute;
  right: 32px;
  top: 16px;
}
/* .btn-box {
  margin-top: 20px;
  text-align: right;
} */
.box-page {
  text-align: right;
  padding-top: 10px;
}
</style>